'use client';

import Link from 'next/link';
import { Button } from '@/components/ui/button';
import { AnimatedButton } from '@/components/ui/micro-interactions';
import { Home, Search, ArrowLeft, Zap, Code } from 'lucide-react';

/**
 * 404错误页面
 * 当用户访问不存在的页面时显示
 */
export default function NotFound() {
  return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-purple-50 dark:from-gray-900 dark:via-gray-800 dark:to-blue-900 flex items-center justify-center px-4">
      <div className="max-w-2xl mx-auto text-center">
        {/* 404动画图标 */}
        <div className="relative mb-8">
          <div className="text-8xl md:text-9xl font-bold text-gray-200 dark:text-gray-700 select-none">
            404
          </div>

          {/* 装饰性元素 */}
          <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
            <div className="relative">
              <Code className="w-16 h-16 text-blue-500 animate-bounce" />
              <div className="absolute -top-2 -right-2 w-6 h-6 bg-red-500 rounded-full flex items-center justify-center">
                <span className="text-white text-xs font-bold">!</span>
              </div>
            </div>
          </div>

          {/* 浮动粒子效果 */}
          <div className="absolute inset-0 overflow-hidden pointer-events-none">
            {Array.from({ length: 6 }).map((_, i) => (
              <div
                key={i}
                className="absolute w-2 h-2 bg-blue-400 rounded-full animate-pulse opacity-60"
                style={{
                  left: `${20 + Math.random() * 60}%`,
                  top: `${20 + Math.random() * 60}%`,
                  animationDelay: `${Math.random() * 2}s`,
                  animationDuration: `${2 + Math.random() * 2}s`,
                }}
              />
            ))}
          </div>
        </div>

        {/* 错误信息 */}
        <div className="mb-8">
          <h1 className="text-3xl md:text-4xl font-bold text-gray-900 dark:text-gray-100 mb-4">
            页面未找到
          </h1>
          <p className="text-lg text-gray-600 dark:text-gray-400 mb-2">
            抱歉，您访问的页面不存在或已被移动
          </p>
          <p className="text-sm text-gray-500 dark:text-gray-500">
            请检查URL是否正确，或者返回首页继续浏览
          </p>
        </div>

        {/* 操作按钮 */}
        <div className="flex flex-col sm:flex-row gap-4 justify-center items-center mb-8">
          <AnimatedButton variant="glow" className="px-6 py-3">
            <Link href="/" className="flex items-center space-x-2">
              <Home className="w-4 h-4" />
              <span>返回首页</span>
            </Link>
          </AnimatedButton>

          <AnimatedButton
            variant="magnetic"
            className="px-6 py-3 border border-gray-300 dark:border-gray-600"
          >
            <Link href="/docs" className="flex items-center space-x-2">
              <Search className="w-4 h-4" />
              <span>浏览文档</span>
            </Link>
          </AnimatedButton>

          <Button variant="ghost" onClick={() => window.history.back()}>
            <ArrowLeft className="w-4 h-4 mr-2" />
            返回上页
          </Button>
        </div>

        {/* 推荐链接 */}
        <div className="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-lg border border-gray-200 dark:border-gray-700">
          <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">
            您可能在寻找：
          </h3>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <Link
              href="/docs/quick-start"
              className="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors group"
            >
              <div className="w-10 h-10 bg-blue-100 dark:bg-blue-900 rounded-lg flex items-center justify-center group-hover:scale-110 transition-transform">
                <Zap className="w-5 h-5 text-blue-600 dark:text-blue-400" />
              </div>
              <div>
                <div className="font-medium text-gray-900 dark:text-gray-100">
                  快速开始
                </div>
                <div className="text-sm text-gray-500 dark:text-gray-400">
                  开始使用CActor
                </div>
              </div>
            </Link>

            <Link
              href="/solutions"
              className="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors group"
            >
              <div className="w-10 h-10 bg-green-100 dark:bg-green-900 rounded-lg flex items-center justify-center group-hover:scale-110 transition-transform">
                <Code className="w-5 h-5 text-green-600 dark:text-green-400" />
              </div>
              <div>
                <div className="font-medium text-gray-900 dark:text-gray-100">
                  解决方案
                </div>
                <div className="text-sm text-gray-500 dark:text-gray-400">
                  查看应用场景
                </div>
              </div>
            </Link>

            <Link
              href="/cases"
              className="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors group"
            >
              <div className="w-10 h-10 bg-purple-100 dark:bg-purple-900 rounded-lg flex items-center justify-center group-hover:scale-110 transition-transform">
                <Search className="w-5 h-5 text-purple-600 dark:text-purple-400" />
              </div>
              <div>
                <div className="font-medium text-gray-900 dark:text-gray-100">
                  案例研究
                </div>
                <div className="text-sm text-gray-500 dark:text-gray-400">
                  成功案例分析
                </div>
              </div>
            </Link>

            <Link
              href="/community"
              className="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors group"
            >
              <div className="w-10 h-10 bg-orange-100 dark:bg-orange-900 rounded-lg flex items-center justify-center group-hover:scale-110 transition-transform">
                <Home className="w-5 h-5 text-orange-600 dark:text-orange-400" />
              </div>
              <div>
                <div className="font-medium text-gray-900 dark:text-gray-100">
                  社区
                </div>
                <div className="text-sm text-gray-500 dark:text-gray-400">
                  加入开发者社区
                </div>
              </div>
            </Link>
          </div>
        </div>

        {/* 底部信息 */}
        <div className="mt-8 text-sm text-gray-500 dark:text-gray-400">
          <p>如果您认为这是一个错误，请联系我们的技术支持团队</p>
          <p className="mt-1">错误代码: 404 | 页面未找到</p>
        </div>
      </div>
    </div>
  );
}
